<template>
    <el-dialog v-model="show" title="" width="800" @close="handleClose">
      <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
        <el-form-item :prop="searchName" :label="$t('common.queryBtn')">
          <el-input v-model="state.queryForm[searchName]" placeholder="" clearable @clear="getDataList" />
        </el-form-item>
  
        <el-form-item>
          <el-button icon="search" type="primary" @click="queryFn">
            {{ $t('common.queryBtn') }}
          </el-button>
          <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
        </el-form-item>
      </el-form>
  
  
      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
        @sort-change="sortChangeHandle" @select="selectFn" ref="tabelREF" row-key="id">
        <el-table-column :reserve-selection="true" type="selection" width="40" />
        <el-table-column :prop="item.prop" :label="item.label" v-for="item in tableOption"
          :key="item.prop"></el-table-column>
  
      </el-table>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="show = false">{{ $t('common.cancelButtonText') }}</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  <script lang="ts" setup>
  import { BasicTableProps, useTable } from "/@/hooks/table";
  
  const props = defineProps<{
    getPage: Function,  // 请求方法
    tableOption: {
      prop: string,
      label: string
    }[],   // 定义表格
    searchName: string,  // 搜索字段
    shopId: string
  }>()
  
  const emit = defineEmits(['submit', "change", "select"]);
  const queryRef = ref()
  const show = ref(false)
  const selectObjs = ref([]) as any
  const loading = ref(false)
  const tabelREF = ref()
  const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {
  
    },
    pageList: props.getPage
  })
  
  
  
  //  table hook
  
  const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    tableStyle
  } = useTable(state)
  const saveSelect = ref([])
  
  const queryFn = async () => {
    saveSelect.value = selectObjs.value
    await getDataList()
  
  
  }
  // 清空搜索条件
  const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    // 清空多选
    selectObjs.value = []
    saveSelect.value = []
    getDataList()
  
  
    tabelREF.value.clearSelection()
  }
  const handleClose = () => {
    queryRef.value?.resetFields()
    tabelREF.value.clearSelection()
  }
  
  const selectFn = (selection, row) => {
    emit("select", selection, row)
  }
  const selectionChangHandle = (selection) => {
    selectObjs.value = selection
    emit("change", selection.value)
  }
  const onSubmit = () => {
    emit("submit", selectObjs.value.length == 0 ? saveSelect.value : selectObjs.value)
    showFn([])
  }
  
  const showFn = (arr: any[]) => {
    show.value = !show.value
    state.queryForm.shopId = props.shopId
    selectObjs.value = arr
    if (show.value) {
  
      queryFn()
  
      if (arr && arr.length > 0) {
        selectObjs.value = arr
        nextTick(() => {
          arr.forEach(el => {
            toggleRowSelectionFn(el)
          });
        })
      }
    }
  }
  
  
  
  
  // 回显选中
  
  const toggleRowSelectionFn = (row) => {
    nextTick(() => {
      let obj = state.dataList.find(el => row.id == el.id)
      if (!obj) return
      tabelREF.value.toggleRowSelection(obj)
    })
  }
  
  defineExpose({
    show,
    showFn,
    selectObjs,
    toggleRowSelectionFn
  })
  
  
  </script>
  
  